<template>
  <div class="header">
    <div class="box">
      <router-link href="#" to="mymine">
        <span class="iconfont icon-zuojiantou"></span>
        <span class="back">返回</span>
      </router-link>
      <span class="ziliao">个人资料</span>
    </div>
    <div class="background"></div>
    <div class="mask">
      <div class="touxiang">
        <div class="t-text">头像</div>
        <div class="t-touxiang">
          <img v-if="userImg" :src="userImg" class="avatar" />
          <i v-else class="t1 iconfont icon-icon"></i>
          <input type="file" ref="file" @change="myChange">
        </div>
      </div>
      <div class="t-id">
        <span class="i-text">用户id</span>
        <input type="text" class="shuruid" value="coffe1639406777896" />
      </div>
      <div class="nickname">
        <span class="n-name">昵称</span>
        <input
          class="n-text"
          value="talia"
          v-model="myname"
        />
      </div>
      <div class="jianjie">
        <span class="j-name">简介</span>
        <input class="j-text" value="这个家伙很懒，什么都没有留下" />
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.header {
  position: relative;
  width: 100%;
  .box {
    height: 30px;
    line-height: 30px;
    padding-bottom: 10px;
    display: flex;
    a {
      text-decoration: none;
      display: flex;
      .iconfont {
        color: black;
        height: 30px;
        display: block;
        line-height: 30px;
      }
      .back {
        color: black;
        height: 30px;
        display: block;
        line-height: 30px;
      }
    }
    .ziliao {
      margin-left: 100px;
    }
  }
  .background {
    width: 100%;
    height: 80px;
    background-color: #0c34ba;
  }
  .mask {
    width: 98%;
    background-color: rgb(255, 255, 255);
    left: 3px;
    top: 84px;
    border-radius: 10px;
    position: absolute;
    .touxiang {
      width: 98%;
      height: 30px;
      display: flex;
      .t-text {
        width: 50px;
        margin-left: 17px;
        line-height: 30px;
        margin-top: 10px;
      }
      .t-touxiang {
        width: 150px;
        z-index: 1000;
        margin-left: 197px;
        margin-top: -96px;
        position: relative;
        .avatar {
          width: 80px;
          height: 80px;
          border-radius: 50px;
          margin-top: 100px;
          margin-left: 30px;
          display: block;
        }
        .t1 {
          font-size: 50px;
          position: absolute;
          right: -93px;
          top: 99px;
          color: #808080;
        }
      }
    }
    .t-id {
      margin-top: 66px;
      margin-left: 15px;
      width: 92%;
      line-height: 40px;
      height: 50px;
      border-bottom: 1px solid #e5e5e5;
      position: relative;
      .i-text {
      }
      .shuruid {
        top: 0px;
        text-align: right;
        right: 0;
        position: absolute;
        border: 0px solid transparent;
        outline: none;
        color: grey;
        // background-color: red;
      }
    }
    .nickname {
      border-bottom: 1px solid #e5e5e5;
      margin-left: 15px;
      width: 92%;
      height: 50px;
      line-height: 40px;
      position: relative;
      .n-name {
      }
      .n-text {
        position: absolute;
        right: 0;
        border: 0px solid transparent;
        outline: none;
        top: 0px;
        text-align: right;
        color: grey;
        // background-color: red;
      }
    }
    .jianjie {
      border-bottom: 1px solid #e5e5e5;
      position: relative;
      margin-left: 15px;
      width: 92%;
      height: 50px;
      line-height: 40px;
      .j-name {
      }
      .j-text {
        // background-color: red;
        text-align: right;
        width: 80%;
        right: 0;
        top: 0px;
        position: absolute;
        border: 0px solid transparent;
        outline: none;
        color: grey;
      }
    }
  }
}
</style>
<script>
import "../assets/fonts/iconfont.css";
export default {
  name: "geren",
  components: {},
  data() {
    return {
      myname: "",
      userImg: "@/assets/touxiang/tou.jpg",
      nickname: "",
      introduce: "",
    };
  },
  methods: {
    //上传头像
    myChange(e) {
      let imgUrl = URL.createObjectURL( this.$refs.file.files[0])
     console.log("touxinag", e.target.files);
      console.log(imgUrl);
      // var img = this.userImg; //imgurl 就是你的图片路径

      function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        console.log(canvas.width,canvas.height);
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
        var dataURL = canvas.toDataURL("assets/" + ext);
        return dataURL;
      }

      var image = new Image();
      image.src = imgUrl;
      image.onload = function () {
        var base64 = getBase64Image(image);
        console.log(base64);
        let tokenString = localStorage.getItem("token_list");
        let d = {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          tokenString: tokenString,
          imgType: "jpg,jpeg,png",
          serverBase64Img: base64,
        };
        let bodystr = "";
        for (var key in d) {
          bodystr += key + "=" + d[key] + "&";
        }
      };
      this.axios("/updateAvatar", {
          method: "POST",
          header: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          data: bodystr,
        })
          .then((res) => {
            this.userImg = res.data.userImg;
            console.log(this.userImg);
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      
    },
  },
  created() {
    this.myChange();
  },
};
</script>


</script>